<template>
  <div class="grid-row md:grid-cols-2">
    <!-- 👉 Fill -->
    <ACard
      title="Card title"
      subtitle="Chocolate cake tiramisu donut"
      text="Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar."
      variant="fill"
      color="primary"
    />

    <!-- 👉 Light -->
    <ACard
      title="Card title"
      subtitle="Chocolate cake tiramisu donut"
      text="Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar."
      variant="light"
      color="primary"
      class="shadow-none"
    />

    <!-- 👉 Outline -->
    <ACard
      title="Card title"
      subtitle="Chocolate cake tiramisu donut"
      text="Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar."
      variant="outline"
      color="primary"
      class="shadow-none"
    />

    <!-- 👉 Text -->
    <ACard
      title="Card title"
      subtitle="Chocolate cake tiramisu donut"
      text="Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar."
      variant="text"
      color="primary"
    />
  </div>
</template>
